<template>
	<div class="zb_list">
		<div v-if="lists">
			<h2>今日直播</h2>
			<ul v-if="list_today.length>0">
				<li v-for="item of list_today" :key="item.id">
					<router-link :to="item.url">
						<img :src="item.img" />
						<div class="content">
							<p>{{item.title}}</p>
							<span>{{item.time}}</span>
						</div>
					</router-link>
				</li>
			</ul>
			<p class="empty_zb" v-else>今日暂无直播</p>
			<h2>其他直播</h2>
			<ul>
				<li v-for="item of list_others" :key="item.id">
					<router-link :to="item.url">
						<img :src="item.img" />
						<div class="content">
							<p>{{item.title}}</p>
							<span>{{item.time}}</span>
						</div>
					</router-link>
				</li>
			</ul>
		</div>
		<div class="empty_box" v-else>
			<img src="../../../assets/commonImg/bg_white_kecheng@2x.png" />
			<p>暂无直播~</p>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'zblist',
		props: {
			lists: Array
		},
		data() {
			return {
				show: true,
				Tlist: this.lists,
				list_today: [],
				list_others:[]
			}
		},
		watch: {
			lists: function(newVal, oldVal) {
				this.Tlist = newVal
				this.getData()
			}
		},
		mounted() {
			this.getData()
		},
		methods: {
			getData() {
				console.log(this.Tlist[0])
				if(this.Tlist[0].today ){
					this.list_today = this.Tlist[0].today
				}
				if(this.Tlist[0].others){
					this.list_others = this.Tlist[0].others
				}
				
			}
		},
	}
</script>

<style>
	.zb_list {
		/* position: relative; */
		width: 92%;
		padding-top: 51px;
		margin: 0px auto;
		text-align: left;
	}

	.zb_list h2 {
		font-size: .32rem;
		color: #333;
		margin: .2rem auto .3rem;
	}

	.zb_list ul li {
		display: inline-block;
		width: 49%;
		margin-right: 2%;
		margin: 0 2% .3rem 0;
	}

	.zb_list ul li:nth-child(2n) {
		margin-right: 0;
	}

	.zb_list ul li img {
		width: 100%;
		border-top-left-radius: 8px;
		border-top-right-radius: 8px;
	}

	.zb_list .content {
		background: #fff;
		-webkit-box-shadow: 0px 2px 10px 0px rgba(193, 193, 193, 0.17);
		box-shadow: 0px 2px 10px 0px rgba(193, 193, 193, 0.17);
		border-bottom-left-radius: 8px;
		border-bottom-right-radius: 8px;
		text-align: left;
		padding: .2rem .15rem;
	}

	.zb_list .content p {
		color: #333;
		font-size: .28rem;
		line-height: .30rem;
		margin-bottom: .18rem;
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.zb_list .content span {
		color: #999;
		font-size: .26rem;
		display: block;
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	.empty_zb{
		text-align: center;
		border-bottom: 1px dashed #ddd;
		padding-bottom: .6rem;
	}
</style>
